<nav class="navbar navbar-expand-lg navbar-light bg-light mb-3 fs-4">
  <div class="container-fluid">
    <a class="navbar-brand" routerLink="/home">
      <img id="tacoImg" class="img-fluid" [lazyLoad]="'assets/TacoCloud.png'"
           alt="墨西哥煎玉米饼卷图">
    </a>
    <button class="navbar-toggler" type="button" (click)="isMenuCollapsed = !isMenuCollapsed">
      &#9776;
    </button>
    <div [ngbCollapse]="isMenuCollapsed" class="collapse navbar-collapse">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" routerLink="/recents" (click)="isMenuCollapsed = true">最新设计</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/specials" (click)="isMenuCollapsed = true">特价专区</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/locations" (click)="isMenuCollapsed = true">地点</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/design" (click)="isMenuCollapsed = true">设计一个墨西哥煎玉米卷</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/login" (click)="isMenuCollapsed = true">
            <img src="assets/down-triangle.png" alt="下拉" class="down">
            <span>登录或创建账户</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link link-danger" routerLink="/cart" (click)="isMenuCollapsed = true">
            <img src="assets/cart.png" alt="购物车">
            {{cart.getCartTotal() * 4.99 | currency}}
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>
